<template>
    <div  class="marLR20" style="padding-top: 20px;">
        <el-button class="operatBtnBig" @click="opernDialog" style="margin-bottom: 5px;">添加供应商</el-button>
        <el-button class="operatBtnMiddle" @click="editSupplier" size="small">编辑</el-button>
        <el-button class="operatBtnMiddle" @click="forbiddeSupplier" size="small">禁用</el-button>
        <el-button class="operatBtnMiddle" @click="enableSupplier" size="small">启用</el-button>
        <el-button class="operatBtnBig" @click="openRelationMateriel" size="small">关联的物料</el-button>
        <!--<el-button class="operatBtnBig" @click.native.stop="changeParent" size="small">设置为前身</el-button>-->
        <el-dialog title="关联的物料列表" :visible.sync="relationMaterielVisible" @close="closeRelationMateriel" width="85%" v-dialogDrag>
            <el-table
                    :data="relationMateriel"
                    border
                    size="mini"
                    ref="materielTable"
                    :header-cell-style="headRowStyle"
                    style="width: 100%;">
                <el-table-column
                        v-for="(item,index) in fieldList" :key="index"
                        v-if="item.field_name != 'images' && item.field_name != 'files' && item.field_name != 'materiel_state' && item.is_show == 1"
                        :prop="item.field_name"
                        :sortable="item.can_sort"
                        :label="item.show_name"
                        show-overflow-tooltip="true"
                        fit
                        align="center">
                    <template slot-scope="scope">
                        <span v-html="getRenderMaterielValue(scope.row,item.field_name)"></span>
                    </template>
                </el-table-column>
                <el-table-column
                        v-else-if="item.field_name == 'materiel_state' && item.is_show == 1"
                        :prop="item.field_name"
                        :sortable="item.can_sort"
                        :label="item.show_name"
                        show-overflow-tooltip="true"
                        fit
                        :filters="stateOptions"
                        column-key="state"
                        :filter-method="filterStateHandler"
                        align="center">
                    <template slot-scope="scope">
                        <span v-html="getRenderMaterielValue(scope.row,item.field_name)"></span>
                    </template>
                </el-table-column>
                <el-table-column
                        v-else-if="item.field_name == 'images' && item.is_show == 1"
                        :prop="item.field_name"
                        :sortable="item.sort_able"
                        :label="item.show_name"
                        show-overflow-tooltip="true"
                        fit
                        align="center">
                    <template slot-scope="scope" style="padding: 0;">
                        <el-popover trigger="hover" placement="top"  style="padding: 0;" v-if="scope.row.images[0]">
                            <div class="block" style="height: 330px;width: 350px;">
                                <el-carousel style="height: 330px;width: 350px;" indicator-position="outside" autoplay="false">
                                    <el-carousel-item v-for="item in getImages(scope.row.images)" :key="item" align="center">
                                        <img :src="item" alt="" style="height: 300px;">
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                            <div slot="reference" class="images-wrapper" style="height: 23px;">
                                <span>
                                    <img :src="(scope.row.images)[0].image_url" alt="" style="width: 23px;height: 23px;">
                                </span>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        v-else-if="item.field_name == 'files' && item.is_show == 1"
                        :prop="item.field_name"
                        :sortable="item.sort_able"
                        :label="item.show_name"
                        show-overflow-tooltip="true"
                        fit
                        align="center">
                    <template slot-scope="scope" style="padding: 0;">
                        <el-popover trigger="hover" placement="top"  style="padding: 0;" v-if="scope.row.files[0]">
                            <div class="block">
                                <p v-for="item in getFiles(scope.row.files)" :key="item" style="font-size: 12px;margin-bottom: 3px;">
                                    <a :href="item.url" style="color: black">{{item.name}}</a>
                                </p>
                            </div>
                            <div slot="reference" class="images-wrapper">
                                <span>
                                    <h3>资料</h3>
                                </span>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        sortable
                        label="关联状态"
                        prop="default"
                        show-overflow-tooltip="true"
                        fit
                        align="center"
                        width="90">
                    <template slot-scope="scope">
                        <span v-html="getRenderMaterielValue(scope.row,'default')"></span>
                    </template>
                </el-table-column>
                <el-table-column
                            label="操作"
                            class-name="operation"
                            align="center"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="cancelRelation(scope.row,scope.$index)" type="text" size="small" style="padding: 2px 5px;" title="取消关联">
                                <icon name="closeCol" class="scaleIcon1" title="取消关联" @click.native.stop="cancelRelation(scope.row,scope.$index)" style="cursor:pointer;"></icon>
                            </el-button>
                            <!--<el-button v-if="scope.row.default == 1" @click="disableRelation(scope.row)" type="text" size="small" style="padding: 2px 5px;" title="禁用关联">
                                <icon name="showDisabled" class="scaleIcon1" title="禁用关联" @click.native.stop = "disableRelation(scope.row)" style="cursor:pointer;"></icon>
                            </el-button>
                            <el-button v-else @click="enableRelation(scope.row)" type="text" size="small" style="padding: 2px 5px;" title="启用关联">
                                <icon name="show" class="scaleIcon1" title="启用关联" @click.native.stop="enableRelation(scope.row)" style="cursor:pointer;"></icon>
                            </el-button>-->
                        </template>
                    </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="closeRelationMateriel">关闭</el-button>
            </span>
        </el-dialog>
        <div style="min-width:400px;height: 30px;display: inline-block;">
            <el-form :inline="true" :model="search" size="small" style="height: 30px;line-height: 30px;">
                <el-form-item label="关键字:">
                    <el-input v-model.trim="keywords" placeholder="供应商名称" style="margin-top: 1px;width: 180px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="operatBtnMiddle" @click="searchSupplier">查询</el-button>
                    <el-button class="operatBtnMiddle" @click="getSupplier()">刷新</el-button>
                </el-form-item>
            </el-form>
        </div>
        <transition name="el-fade-in-linear">
            <div v-show="dialogVisible" class="materielClass" ref="supplierDialog">
                <div class="materielTitle">
                    <span>{{dialogTitle}}</span>
                    <span style="display: inline-block;float: right;">
                        <i @click="narrowSupplierDialog" class="el-icon-minus materielButton"></i>
                        <i @click="enlargeSupplierDialog" class="el-icon-edit-outline materielButton"></i>
                        <i @click="closeSupplierDialog" class="el-icon-close materielButton"></i>
                    </span>
                </div>
                <div class="materielContent">
                    <el-form :label-position="right" :rules="supplierRules"  :model="supplierForm" ref="supplierForm" action="">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="区域" prop="area" style="display: inline-block;" label-width="60px">
                                    <el-select v-model="supplierForm.area" placeholder="请选择区域" style="width: 80px;" @change="areaChange">
                                        <el-option
                                                v-for="item in areaOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item v-if="!provinceCityVisible" label="国家" prop="country" style="display: inline-block;" label-width="70px">
                                    <el-select v-model="supplierForm.country" placeholder="请选择国家" style="width: 315px;" @change="changeByCity">
                                        <el-option
                                                v-for="item in countryList"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item v-if="provinceCityVisible" label="省" prop="province" style="display: inline-block;" label-width="35px">
                                    <el-select v-model="supplierForm.province" placeholder="请选择省份" style="width: 155px;" @change="changeByProvince(null,null)">
                                        <el-option
                                                v-for="item in provList"
                                                :key="item.provCode"
                                                :label="item.provName"
                                                :value="item.provCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item v-if="provinceCityVisible" label="市" prop="city" style="display: inline-block;" label-width="35px">
                                    <el-select v-model="supplierForm.city" placeholder="请选择市" style="width: 155px;" @change="changeByCity">
                                        <el-option
                                                v-for="item in cityList"
                                                :key="item.cityCode"
                                                :label="item.cityName"
                                                :value="item.cityCode">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="名称" prop="name" label-width="60px">
                                    <el-input v-model.trim="supplierForm.name" class="inputTxtWrapper"  placeholder="供应商名称" style="width: 470px;"></el-input>
                                </el-form-item>
                                <el-form-item label="开户行" prop="bank" label-width="60px">
                                    <el-input v-model.trim="supplierForm.bank" class="inputTxtWrapper"  placeholder="供应商开户银行" style="width: 470px;"></el-input>
                                </el-form-item>
                                <el-form-item label="账号" prop="account" label-width="60px">
                                    <el-input v-model.trim="supplierForm.account" class="inputTxtWrapper"  placeholder="供应商账号" style="width: 470px;"></el-input>
                                </el-form-item>
                                <el-form-item label="税号" prop="tax_number" label-width="60px">
                                    <el-input v-model.trim="supplierForm.tax_number" class="inputTxtWrapper"  placeholder="供应商税号" style="width: 470px;"></el-input>
                                </el-form-item>
                                <el-form-item label="供应商等级" prop="supplier_level" label-width="100px">
                                    <el-select v-model="supplierForm.supplier_level" placeholder="请选择供应商等级">
                                        <el-option
                                                v-for="item in supplierLevelData"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="详细地址" prop="address" style="display: inline-block;" label-width="80px">
                                    <el-input v-model.trim="supplierForm.address" class="inputTxtWrapper"  placeholder="供应商详细地址" style="width: 470px;"></el-input>
                                </el-form-item>
                                <el-form-item label="电话" prop="mobile" label-width="80px">
                                    <el-input v-model.trim="supplierForm.mobile" class="inputTxtWrapper"  placeholder="供应商电话" style="width: 470px;"></el-input>
                                </el-form-item>
                                <el-form-item label="公司网站" prop="website" label-width="80px">
                                    <el-input v-model.trim="supplierForm.website" class="inputTxtWrapper"  placeholder="公司网站" style="width: 470px;"></el-input>
                                </el-form-item>
                                <el-form-item label="公司性质" prop="nature" style="display: inline-block;" label-width="80px">
                                    <el-select v-model="supplierForm.nature" placeholder="请选择" style="width: 150px;">
                                        <el-option
                                                v-for="item in natureOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="公司状态" prop="company_state" style="display: inline-block;" label-width="100px">
                                    <el-select v-model="supplierForm.company_state" placeholder="请选择" style="width: 150px;">
                                        <el-option
                                                v-for="item in companyStateOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="前身公司" prop="son_id" label-width="80px">
                                    <el-select v-model="supplierForm.son_id" clearable filterable placeholder="请选择前身公司" style="width: 470px;">
                                        <el-option
                                                v-for="item in newCompanyData"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value"
                                                :disabled="item.disabled">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="启用" prop="state" label-width="60px">
                                    <el-radio v-model="supplierForm.state" label="1">是</el-radio>
                                    <el-radio v-model="supplierForm.state" label="0">否</el-radio>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-row>
                        添加联系人
                        <el-table
                                :data="supplierUserTable"
                                border
                                :header-cell-style="headRowStyle"
                                class="addSupperlierClass"
                                size="mini"
                                style="width: 100%;margin-top: 10px;">
                            <el-table-column
                                    prop="name"
                                    label="姓名"
                                    show-overflow-tooltip
                                    align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.name" size="mini" placeholder="请输入姓名"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="job"
                                    label="职位"
                                    show-overflow-tooltip
                                    align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.job" size="mini" placeholder="请输入职位"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="phone"
                                    label="手机"
                                    show-overflow-tooltip
                                    align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.phone" size="mini" placeholder="请输入手机号码"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="email"
                                    label="邮箱"
                                    show-overflow-tooltip
                                    align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.email" size="mini" placeholder="请输入邮箱"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="qq"
                                    label="QQ"
                                    show-overflow-tooltip
                                    align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.qq" size="mini" placeholder="请输入QQ"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="wechat"
                                    label="微信"
                                    show-overflow-tooltip
                                    align="center">
                                <template slot-scope="scope">
                                    <el-input v-model="scope.row.wechat" size="mini" placeholder="请输入微信号"></el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="state"
                                    label="状态"
                                    show-overflow-tooltip
                                    width="90"
                                    align="center">
                                <template slot-scope="scope">
                                    <el-select v-model="scope.row.state" size="mini" placeholder="请选择">
                                        <el-option
                                                v-for="item in supplierUserStateOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="state"
                                    label="操作"
                                    width="60"
                                    align="center">
                                <template slot-scope="scope">
                                    <el-button @click="delSupplierUser(scope.row,scope.$index)" type="text" size="small" style="padding: 2px 5px;" title="删除">
                                        <icon name="del" class="scaleIcon1" title="删除" @click.native.stop="delSupplierUser(scope.row,scope.$index)" style="cursor:pointer;"></icon>
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-col :span="2" :offset="22" style="margin-top: 10px;">
                            <e-button class="operatBtnBig" @click="addSupplierUser">添加一行</e-button>
                        </el-col>
                    </el-row>
                    <div class="clear"></div>
                </div>
                <div class="materielFooter">
                    <e-button class="operatBtnMiddle" @click="closeSupplierDialog">取 消</e-button>
                    <e-button v-show="addSupplier" class="operatBtnBig" type="primary" @click="onSubmitSupplierForm('supplierForm','true')">保存并继续添加</e-button>
                    <e-button class="operatBtnBig" type="primary" @click="onSubmitSupplierForm('supplierForm','false')">保存并退出</e-button>
                </div>
            </div>
        </transition>
        <el-table
                :data="supplierData"
                border
                size="mini"
                ref="supplierTable"
                @sort-change="sortChange"
                :header-cell-style="headRowStyle"
                @selection-change="handleSelectionChange"
                @row-click="rowClick"
                :row-style="rowClass"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="34">
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <div v-if="props.row.supplier_user.length > 0">
                        <span style="display: inline-block;font-size: 13px;">联系人</span>
                        <el-table :data="props.row.supplier_user" style="width: 100%" size="mini" border :header-cell-style="innerHeadRowStyle" class="supplierMinTableClass">
                            <el-table-column
                                    prop="name"
                                    label="姓名"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="job"
                                    label="职务"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="phone"
                                    label="手机"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="qq"
                                    label="QQ"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="wechat"
                                    label="微信"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="email"
                                    label="邮箱"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="user_state"
                                    label="状态"
                                    align="center">
                            </el-table-column>
                        </el-table>
                    </div>
                    <div v-if="props.row.former_company.length > 0">
                        <span style="display: inline-block;font-size: 13px;">公司前身</span>
                        <el-table :data="props.row.former_company" style="width: 100%" size="mini" border :header-cell-style="innerHeadRowStyle" class="supplierMinTableClass">
                            <el-table-column
                                    prop="area"
                                    label="区域"
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="55">
                                <template slot-scope="scope">
                                    <span v-html="getRenderValue(scope.row,'area')"></span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="名称"
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="220">
                            </el-table-column>
                            <el-table-column
                                    prop="nature"
                                    label="性质"
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="55">
                                <template slot-scope="scope">
                                    <span v-html="getRenderValue(scope.row,'nature')"></span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="地址"
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="220">
                                <template slot-scope="scope">
                                    <span v-html="getRenderValue(scope.row,'address')"></span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="mobile"
                                    label="电话"
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="140">
                            </el-table-column>
                            <el-table-column
                                    prop="website"
                                    label="公司网站"
                                    show-overflow-tooltip="true"
                                    align="center"
                                    width="120">
                                <template slot-scope="scope">
                                    <a :href="'http://'+scope.row.website"
                                       target="_blank"
                                       class="buttonText">{{scope.row.website}}</a>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="bank"
                                    label="开户银行"
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="140">
                            </el-table-column>
                            <el-table-column
                                    prop="account"
                                    label="账号"
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="tax_number"
                                    label="税号"
                                    align="center"
                                    show-overflow-tooltip="true"
                                    width="200">
                            </el-table-column>
                            <el-table-column
                                    prop="supplier_level"
                                    label="供应商等级"
                                    align="center"
                                    show-overflow-tooltip="true">
                            </el-table-column>
                            <el-table-column
                                    prop="company_state"
                                    label="公司状态"
                                    align="center"
                                    width="75">
                                <template slot-scope="scope">
                                    <span v-html="getRenderValue(scope.row,'company_state')"></span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="state"
                                    label="启用"
                                    align="center"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="user.user_name"
                                    label="创建人"
                                    show-overflow-tooltip="true"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="create_time"
                                    label="创建时间"
                                    show-overflow-tooltip="true"
                                    align="center">
                            </el-table-column>
                            <!--<el-table-column
                                    label="操作"
                                    align="center"
                                    width="60">
                                <template slot-scope="scope">
                                    <el-button @click="restoreAsParent(scope.row)" type="text" size="small" style="padding: 2px 5px;" title="恢复">
                                        <icon name="toggle" class="scaleIcon1" title="恢复" @click.native.stop = "restoreAsParent(scope.row)" style="cursor:pointer;"></icon>
                                    </el-button>
                                </template>
                            </el-table-column>-->
                        </el-table>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    prop="area"
                    label="区域"
                    sortable
                    align="center"
                    show-overflow-tooltip="true"
                    width="50">
                <template slot-scope="scope">
                    <span v-html="getRenderValue(scope.row,'area')"></span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="名称"
                    sortable
                    align="center"
                    show-overflow-tooltip="true"
                    width="220">
            </el-table-column>
            <el-table-column
                    prop="nature"
                    label="性质"
                    sortable
                    align="center"
                    show-overflow-tooltip="true"
                    width="50">
                <template slot-scope="scope">
                    <span v-html="getRenderValue(scope.row,'nature')"></span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    align="center"
                    show-overflow-tooltip="true"
                    width="220">
                <template slot-scope="scope">
                    <span v-html="getRenderValue(scope.row,'address')"></span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="mobile"
                    label="电话"
                    align="center"
                    show-overflow-tooltip="true"
                    width="140">
            </el-table-column>
            <el-table-column
                    prop="website"
                    label="公司网站"
                    show-overflow-tooltip="true"
                    align="center"
                    width="120">
                <template slot-scope="scope">
                    <a :href="'http://'+scope.row.website"
                       target="_blank"
                       class="buttonText">{{scope.row.website}}</a>
                </template>
            </el-table-column>
            <el-table-column
                    prop="bank"
                    label="开户银行"
                    align="center"
                    show-overflow-tooltip="true"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="account"
                    label="账号"
                    align="center"
                    show-overflow-tooltip="true"
                    width="220">
            </el-table-column>
            <el-table-column
                    prop="tax_number"
                    label="税号"
                    align="center"
                    show-overflow-tooltip="true"
                    width="220">
            </el-table-column>
            <el-table-column
                    prop="supplier_level"
                    label="供应商等级"
                    align="center"
                    show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="company_state"
                    label="公司状态"
                    sortable
                    align="center"
                    width="75">
                <template slot-scope="scope">
                    <span v-html="getRenderValue(scope.row,'company_state')"></span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="启用"
                    sortable
                    align="center"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="user.user_name"
                    label="创建人"
                    sortable
                    show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="create_time"
                    label="创建时间"
                    sortable
                    show-overflow-tooltip="true"
                    align="center">
            </el-table-column>
            <div slot="append" style="height: 36px;line-height: 36px;">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="totalSupplier"
                        :current-page="currentPage"
                        style="padding: 4px 20px;height: 36px;line-height: 36px;">
                </el-pagination>
            </div>
        </el-table>

    </div>
</template>

<script>
    import http from "@/assets/js/http"
    import _g from "@/assets/js/global"
    import { ADDRLIST } from "@/assets/js/data.js"
    import { mapGetters } from 'vuex'
    import {countryList} from "../../../assets/js/data";

    export default {
        data() {
            return {
                supplierRules: {
                    name: [
                        { type: 'string',message: '请输入字符串', trigger: 'blur' },
                        { required: true, message: '请输入类别名称', trigger: 'blur' }
                    ],
                },
                supplierData: [],            //供应商信息列表
                dialogVisible: false,       //控制供应商表单弹框是否显示
                addSupplier: true,          //控制供应商表单弹框中保存并继续添加按钮是否显示
                dialogTitle: '添加供应商',   //供应商表单弹框的标题
                saveMessage: '',             //供应商表单保存时提示的部分信息
                supplierForm: {
                    id: '',         //id
                    nature: '',
                    area: 1,
                    country: '',
                    province: '',
                    city: '',
                    name: '',       //名称
                    address: '',    //地址
                    mobile: '',     //电话
                    website: '',   //公司网站
                    bank: '',
                    account: '',    //账号
                    tax_number: '', //税号
                    company_state: 1, //公司状态
                    state: '1',      //启用状态
                    supplier_level: 'A', //供应商等级
                    parent_id: '',   //最新公司
                    son_id: '',      //最新前身公司
                },
                pageSizes: [20, 50, 100],       //每页条数选择数组
                pageSize: 20,                   //每页条数
                totalSupplier: '',              //供应商总数
                currentPage: 1,                 //当前页码
                sortColumn: 'state',            //排序字段，默认创建时间
                sortDirection: 'descending',    //排序方式，默认降序
                keywords: '',                   //物料搜索关键字
                areaOptions: [
                    {value: 1,label: '国内'},
                    {value: 2,label: '国外'},
                ],
                companyStateOptions: [
                    {value: 1,label: '存续'},
                    {value: 0,label: '注销'}
                ],
                natureOptions: [
                    {value: 1,label: '国企'},
                    {value: 2,label: '外资'},
                    {value: 3,label: '合资'},
                    {value: 4,label: '私营'},
                    {value: 5,label: '个人'},
                ],
                supplierUserStateOptions: [
                    {value:1, label: '在职'},
                    {value:0, label: '离职'}
                ],
                provinceCityVisible: true,
                countryList: [],        //国家
                provList : [],          //省
                cityList : [],          //市
                regionList : [],        //区县
                supplierUserTable: [
                    {
                        name: '',
                        job: '',
                        phone: '',
                        qq: '',
                        wechat: '',
                        email: '',
                        state: 1
                    },
                ],
                supplierLevelData: [
                    {value: 'A',label:'A'},
                    {value: 'B',label:'B'},
                    {value: 'C',label:'C'},
                    {value: 'D',label:'D'},
                    {value: 'E',label:'E'},
                    {value: 'F',label:'F'},
                    {value: 'G',label:'G'},
                    {value: 'H',label:'H'},
                    {value: 'I',label:'I'},
                    {value: 'J',label:'J'},
                    {value: 'K',label:'K'},
                ],
                relationMateriel: [],
                relationMaterielVisible: false,
                fieldList: [],
                fieldShow: {},                  //用于物料表单字段显示名
                newCompanyData: [],
                /*oldCompanyInfo: {
                    'id': '',
                    'name': ''
                },
                newCompanyInfo: {
                    'id': '',
                    'name': ''
                },*/
                /*pageSizesNew: [20,50,100],
                pageSizeNew: 20,                   //每页条数
                totalNewSupplier: '',              //供应商总数
                currentPageNew: 1,                 //当前页码
                currentSupplierId: '',
                searchNew: {
                    keywords: '',
                },*/
                selection: [],
                selectRow: [],
            }
        },
        methods: {
            handleSelectionChange:function(val){
                this.selection = val;
            },
            /* 表头样式 */
            headRowStyle:function({row,column,rowIndex,columnIndex}){
                return 'background:#E6EEF8;color:#222;padding:3px 0;';
            },
            /* 渲染表体内容 */
            getRenderMaterielValue:function(name,field){
                if (field == 'materiel_type_id'){
                    if (name.type){
                        return name.type.fullType;
                    }
                    return '';
                }
                if (field == 'materiel_inventory' || field == 'create_time'){
                    return name[field];
                }
                if (field == 'materiel_unit' && name[field]){
                    return name['materiel_unit_read'];
                }
                if (field == 'materiel_state'  && name[field] >= 0){
                    switch (name[field]){
                        case 0: return '启用';break;
                        case 1: return '用完即止';break;
                        case 2: return '禁用';break;
                        case 3: return '选型';break;
                        case 4: return '报废';break;
                    }
                }
                if (field == 'default'){
                    if (name['default'] == 1){
                        return '启用';
                    } else{
                        return '停用';
                    }
                }
                if (name[field]){
                    let val = name[field];
                    if (this.searchField.indexOf(field) >= 0){
                        if (val.indexOf(this.keywords) >= 0){
                            return val.replace(this.keywords,"<font color='red'>"+this.keywords+"</font>");
                        }else {
                            return val;
                        }
                    }else{
                        return val;
                    }
                }
            },
            /* 重组图片数组，表体中显示 */
            getImages:function (images) {
                let imageArr = [];
                for (let i in images){
                    imageArr.push(images[i].image_url);
                }
                return imageArr;
            },
            /* 重组文件数组，表体中显示 */
            getFiles:function (files) {
                let fileArr = [];
                for (let i in files){
                    fileArr.push({name:files[i].old_name,url:files[i].file_url});
                }
                return fileArr;
            },
            getRenderValue:function(row,field){
                if (field == 'address'){
                    let address = '';
                    if (row.country){
                        for (let k of countryList){
                            if (row.country == k.value){
                                address += k.label;
                            }
                        }
                    }else{
                        for (let i of ADDRLIST){
                            if (row.province == i.code){
                                address += i.name;
                                for (let j of i.child){
                                    if (Number(row.city) == j.code){
                                        if (i.name != j.name){
                                            address += j.name;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    address += row.address;
                    return address;
                }
                if (field == 'area'){
                    if (row.area == 1){
                        return '国内';
                    } else{
                        return '国外';
                    }
                }
                if (field == 'nature'){
                    switch (row.nature){
                        case 1: return '国企'; break;
                        case 2: return '外资'; break;
                        case 3: return '合资'; break;
                        case 4: return '私营'; break;
                        case 5: return '个人'; break;
                    }
                }
                if (field == 'company_state'){
                    if (row.company_state == 1){
                        return '存续';
                    }
                    return '注销';
                }
                if (field == 'user_state'){
                    //console.log(row);
                }
            },
            addSupplierUser:function(){
                let user = {name: '', job:'', phone:'', qq:'', wechat:'', email:'', state: 1};
                this.supplierUserTable.push(user);
            },
            delSupplierUser:function(row,index){
                this.supplierUserTable.splice(index,1);
            },
            areaChange:function(data){
                if (data == 2){
                    this.provinceCityVisible = false;
                    this.supplierForm.province = '';
                    this.supplierForm.city = '';
                }else{
                    this.supplierForm.country = '';
                    this.provinceCityVisible = true;
                }
            },
            getCountryList(){
                this.countryList = countryList;
            },
            /* 初始化获取省市区 */
            getProvList(provinceCode){
                let provList = [];
                for(let item of ADDRLIST){
                    provList.push({provName : item.name,provCode : item.code,});
                }
                if(provinceCode === null){
                    provinceCode = ADDRLIST[0].code;
                }
                //this.form.provinceCode = parseInt(provinceCode);
                this.provList = provList;
            },

            /* 省市区(县)联动 */
            changeByProvince(currCityCode,currRegionCode){
                let regionList = [];
                let cityList = [];
                let isFindPro = false;        //  默认没有匹配省
                const currProvinceCode = this.supplierForm.province;

                for(let item of ADDRLIST){
                    if(item.code == currProvinceCode){    //  如果省匹配
                        isFindPro = true;
                        if(currCityCode === null){
                            currCityCode =  (item.child)[0].code;
                        }
                        for(let cityItem of item.child){         //  遍历市
                            cityList.push({cityName : cityItem.name,cityCode : cityItem.code});
                            if(cityItem.code == currCityCode){        //  如果市匹配
                                if(currRegionCode === null){
                                    currRegionCode = (cityItem.child)[0].code;
                                }
                                for(let regionItem of cityItem.child){      //  遍历区县
                                    regionList.push({regionName : regionItem.name,regionCode : regionItem.code});
                                }
                            }
                        }
                        if(isFindPro){
                            break;
                        }
                    }
                }
                this.cityList = cityList;
                this.regionList = regionList;
                this.supplierForm.city = '';
                /*this.form.cityCode = currCityCode
                this.form.districtCode = currRegionCode*/
            },
            /* 市区(县)联动 */
            changeByCity(){
                let regionList = []
                let isFindPro = false                                               //  默认没有匹配省
                let isFindCity = false                                               //  默认没有匹配市
                const currProvinceCode = this.supplierForm.province
                const currCityCode = this.supplierForm.city
                let currRegionCode = null
                for(let item of ADDRLIST){
                    if(item.code == currProvinceCode){                                                       //  如果省匹配
                        isFindPro = true
                        for(let cityItem of item.child){                                                                        //  遍历市
                            if(cityItem.code == currCityCode){                                                            //  如果市匹配
                                currRegionCode = (cityItem.child)[0].code
                                for(let regionItem of cityItem.child){                                                                                                              //  遍历区县
                                    regionList.push({regionName : regionItem.name,regionCode : regionItem.code})
                                }
                            }
                            if(isFindCity){
                                break
                            }
                        }
                        if(isFindPro){
                            break
                        }
                    }
                }
                this.regionList = regionList
                //this.form.districtCode = currRegionCode
            },
            /* 缩小供应商表单弹框尺寸 */
            narrowSupplierDialog:function(){
                var supplierDialog = this.$refs.supplierDialog;
                supplierDialog.style.height = 55 + 'px';
                supplierDialog.style.overflow = 'hidden';
            },
            /* 恢复供应商表单弹框尺寸 */
            enlargeSupplierDialog:function(){
                var supplierDialog = this.$refs.supplierDialog;
                supplierDialog.style.height = 'auto';
                supplierDialog.style.overflow = 'auto';
            },
            /* 关闭新增供应商窗口 */
            closeSupplierDialog:function(){
                this.dialogVisible = false;
                this.clearSupplierForm('supplierForm');
            },
            /* 清空供应商表单 */
            clearSupplierForm: function (formName) {
                this.$refs[formName].resetFields();
                this.supplierForm.id = '';
                this.supplierForm.nature = '';
                this.supplierForm.name = '';
                this.supplierForm.area = 1;
                this.supplierForm.country = '';
                this.supplierForm.province = '';
                this.supplierForm.city = '';
                this.supplierForm.address = '';
                this.supplierForm.mobile = '';
                this.supplierForm.website = '';
                this.supplierForm.account = '';
                this.supplierForm.tax_number = '';
                this.supplierForm.company_state = 1;
                this.supplierForm.supplier_level = 'A';
                this.supplierForm.state = '1';
                this.supplierUserTable = [{name: '', job: '', phone: '', qq: '', wechat: '', email: '', state: 1},];
            },
            /* 提交供应商表单到后台，新建和修改 */
            onSubmitSupplierForm:function(formName,type){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$confirm('是否确认'+this.saveMessage+'?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                            center: true
                        }).then(()=>{
                            _g.showLoading('提交中');
                            let data = {};
                            if (this.supplierForm.id){
                                data.id = this.supplierForm.id;
                            }
                            data.nature = this.supplierForm.nature;
                            data.name = this.supplierForm.name;
                            data.area = this.supplierForm.area;
                            data.country = this.supplierForm.country;
                            data.province = this.supplierForm.province;
                            data.city = this.supplierForm.city;
                            data.address = this.supplierForm.address;
                            data.mobile = this.supplierForm.mobile;
                            data.website = this.supplierForm.website;
                            data.bank = this.supplierForm.bank;
                            data.account = this.supplierForm.account;
                            data.tax_number = this.supplierForm.tax_number;
                            data.company_state = this.supplierForm.company_state;
                            data.state = this.supplierForm.state;
                            data.supplier_level = this.supplierForm.supplier_level;
                            data.son_id = this.supplierForm.son_id;
                            data.supplierUser = this.supplierUserTable;
                            this.apiPost('admin/supplier/save',data).then(data=>{
                                _g.showLoading().close();
                                if(typeof data === 'string'){
                                    data = JSON.parse(data);
                                }
                                if (data.code == 401){
                                    _g.toastMsg("error", data.message);
                                    this.$router.push('/');
                                }
                                if (data.code != 200){
                                    _g.toastMsg("error", data.message);
                                    return;
                                }
                                this.clearSupplierForm('supplierForm');
                                _g.toastMsg("success", data.message);
                                if (type == 'false'){
                                    this.dialogVisible = false;
                                }
                                this.getSupplier();
                            });
                        }).catch(()=>{
                            _g.toastMsg("error", data.message);
                        });
                    } else {
                        return false;
                    }
                });
            },
            /* 关键字搜索 */
            searchSupplier:function(){
                this.getSupplier();
            },
            searchNewSupplier:function(){
                this.getParentSupplier(this.currentSupplierId);
            },
            /* 获取供应商列表 */
            getSupplier:function(){
                let data = {};
                data.page = this.currentPage;
                data.pageSize = this.pageSize;
                data.keywords = this.keywords;
                data.sortColumn = this.sortColumn;
                data.sortDirection = this.sortDirection;
                data.keywords = this.keywords;
                this.apiPost('admin/supplier/index',data).then(res=>{
                    this.supplierData = res.data;
                    this.totalSupplier = res.count;
                });
            },
            /* 打开添加供应商弹框 */
            opernDialog:function(){
                this.dialogTitle = '添加供应商';
                this.saveMessage = '添加';
                this.addSupplier = true;
                this.dialogVisible = true;
                this.supplierForm.area = 1;
                this.provinceCityVisible = true;
                this.getParentSupplier();
            },
            /* 打开编辑供应商弹框 */
            editSupplier:function(){
                if (this.selection.length < 1){
                    _g.toastMsg('error','请选择要编辑的供应商');
                    return;
                }
                if (this.selection.length > 1){
                    _g.toastMsg('error','一次只能编辑一个供应商');
                    return;
                }
                let data = this.selection[0];
                this.dialogTitle = '修改供应商';
                this.saveMessage = '修改';
                this.addSupplier = false;
                this.supplierForm.id = data.id;
                this.supplierForm.name = data.name;
                if (data.area && data.area != 'null'){
                    this.supplierForm.area = data.area;
                    if (data.area == 1){
                        this.provinceCityVisible = true;
                    }else{
                        this.provinceCityVisible = false;
                    }
                }
                if (data.nature && data.nature != 'null'){
                    this.supplierForm.nature = data.nature;
                }
                if (data.country && data.country != 'null'){
                    this.supplierForm.country = data.country;
                }
                if (data.province && data.province != 'null'){
                    this.supplierForm.province = Number(data.province);
                    this.changeByProvince(null,null);
                    if (data.city && data.city != 'null'){
                        this.supplierForm.city = data.city;
                    }
                }
                if (data.address && data.address != 'null'){
                    this.supplierForm.address = data.address;
                }
                if (data.mobile && data.mobile != 'null'){
                    this.supplierForm.mobile = data.mobile;
                }
                if (data.website && data.website != 'null'){
                    this.supplierForm.website = data.website;
                }
                if (data.bank && data.bank != 'null'){
                    this.supplierForm.bank = data.bank;
                }
                if (data.account && data.account != 'null'){
                    this.supplierForm.account = data.account;
                }
                if (data.tax_number && data.tax_number != 'null'){
                    this.supplierForm.tax_number = data.tax_number;
                }
                if (data.supplier_level && data.supplier_level != 'null'){
                    this.supplierForm.supplier_level = data.supplier_level;
                }
                if (data.company_state != 'null' && data.company_state >= 0){
                    this.supplierForm.company_state = Number(data.company_state);
                }
                if (data.state == '是'){
                    this.supplierForm.state = '1';
                }else {
                    this.supplierForm.state = '0';
                }
                if (data.son_id){
                    this.supplierForm.son_id = Number(data.son_id);
                }
                if (data.supplier_user.length > 0){
                    let user = [];
                    for (let item of data.supplier_user){
                        user.push({'name':item.name,'job':item.job,'phone':item.phone,'qq':item.qq,'wechat':item.wechat,'email':item.email,'state':item.state});
                    }
                    this.supplierUserTable = user;
                }
                this.getParentSupplier(data.id);
                this.dialogVisible = true;
            },
            /* 禁用供应商 */
            forbiddeSupplier:function(){
                if (this.selection.length < 1){
                    _g.toastMsg('error','请选择要禁用的供应商');
                    return;
                }
                this.$confirm('是否确认禁用该供应商?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    let supplier = [];
                    for (let i of this.selection){
                        supplier.push(i.id);
                    }
                    let data = {};
                    data.id = supplier;
                    this.apiPost('admin/supplier/forbidde',data).then(res=>{
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        } else{
                            _g.toastMsg('success',res.message);
                            this.getSupplier();
                        }
                    });
                }).catch(()=>{});
            },
            /* 行点击事件 */
            rowClick:function(row, event, column){
                if (this.dialogVisible){
                    return;
                }
                this.selection.forEach(item => {
                    // 排他,每次选择时把其他选项都清除
                    if (item.id !== row.id) {
                        this.$refs['supplierTable'].toggleRowSelection(item);
                    }
                });
                this.$refs['supplierTable'].toggleRowSelection(row);
            },
            // 多选高亮选中行
            rowClass({row, rowIndex}){
                if(this.selectRow.includes(rowIndex)){
                    return { "background-color": "rgba(185, 221, 249, 0.75)" }
                }else{
                    return 'background:#f0f9eb;';
                }
            },
            /* 启用供应商 */
            enableSupplier:function(){
                if (this.selection.length < 1){
                    _g.toastMsg('error','请选择要启用的供应商');
                    return;
                }
                this.$confirm('是否确认启用该供应商?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    let supplier = [];
                    for (let i of this.selection){
                        supplier.push(i.id);
                    }
                    let data = {};
                    data.id = supplier;
                    this.apiPost('admin/supplier/enable',data).then(res=>{
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        } else{
                            _g.toastMsg('success',res.message);
                            this.getSupplier();
                        }
                    });
                });
            },
            /* 修改每页条数事件 */
            handleSizeChange:function(size){
                let tmpSize = this.pageSize;
                if (tmpSize > this.totalSupplier && size > this.totalSupplier){
                    this.pageSize = size;
                    return;
                }
                this.pageSize = size;
                this.getSupplier();
            },
            handleNewSizeChange:function(size){
                let tmpSize = this.pageSizeNew;
                if (tmpSize > this.totalNewSupplier && size > this.totalNewSupplier){
                    this.pageSizeNew = size;
                    return;
                }
                this.pageSizeNew = size;
                this.getParentSupplier(this.currentSupplierId);
            },
            /* 修改当前页码事件 */
            handleCurrentChange:function(page){
                this.currentPage = page;
                this.getSupplier();
            },
            handleNewCurrentChange:function(page){
                this.currentPageNew = page;
                this.getParentSupplier(this.currentSupplierId);
            },
            /* 表头样式 */
            headRowStyle:function({row,column,rowIndex,columnIndex}){
                return 'background:#E6EEF8;color:#222;padding:3px 0;';
            },
            innerHeadRowStyle:function({row,column,rowIndex,columnIndex}){
                return 'background:#E6EEF8;color:#222;padding:0;';
            },
            supplierRowStyle:function({row, rowIndex}){
                return 'background:#f0f9eb;';
            },
            /* 修改排序事件 */
            sortChange:function(column){
                if (column.prop){
                    this.sortColumn = column.prop;
                    this.sortDirection = column.order;
                }else{
                    this.sortColumn = 'state';
                    this.sortDirection = 'descending';
                }
                this.getSupplier();
            },
            openRelationMateriel:function(){
                if (this.selection.length < 1){
                    _g.toastMsg('error','请选择供应商');
                    return;
                }
                if (this.selection.length > 1){
                    _g.toastMsg('error','同时只能查看一个供应商关联的物料');
                    return;
                }
                let data = {};
                data.id = this.selection[0].id;
                this.apiPost('admin/supplier/getMateriel',data).then(res=>{
                    if (typeof res === 'string'){
                        res = JSON.parse(res);
                    }
                    if (res.code != 200){
                        _g.toastMsg('error',res.message);
                    }else{
                        if (res.data.length > 0){
                            this.relationMateriel = res.data;
                            this.relationMaterielVisible = true;
                        }else{
                            _g.toastMsg('error','还未关联任何物料');
                        }
                    }
                });
            },
            closeRelationMateriel:function(){
                this.relationMaterielVisible = false;
                this.relationMateriel = [];
            },
            getRelationMateriel:function(id) {
                let data = {};
                data.id = id;
                this.apiPost('admin/supplier/getMateriel',data).then(res=>{
                    if (typeof res === 'string'){
                        res = JSON.parse(res);
                    }
                    if (res.code == 300){
                        this.relationMateriel = [];
                    }else if (res.code == 400) {
                        _g.toastMsg('error',res.message);
                    }else{
                        this.relationMateriel = res.data;
                    }
                });
            },
            /* 取消供应商、物料关联 */
            cancelRelation:function(row,index){
                this.$confirm('是否确认取消该物料关联?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    let data = {};
                    data.supplier = this.selection[0].id;
                    data.materiel = row.id;
                    this.apiPost('admin/supplier/cancelRelation',data).then(res=>{
                        if (typeof  res === 'string'){
                            res = JSON.parse(res);
                        }
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        } else{
                            _g.toastMsg('success',res.message);
                            this.getRelationMateriel(data.supplier);
                        }
                    });
                }).catch(()=>{});
            },
            /* 禁用供应商、物料关联 */
            disableRelation:function(row){
                this.$confirm('是否确认禁用该物料关联?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    let data = {};
                    data.supplier = this.selection[0].id;
                    data.materiel = row.id;
                    this.apiPost('admin/supplier/disableRelation',data).then(res=>{
                        if (typeof  res === 'string'){
                            res = JSON.parse(res);
                        }
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        } else{
                            _g.toastMsg('success',res.message);
                            this.getRelationMateriel(data.supplier);
                        }
                    });
                }).catch(()=>{});
            },
            /* 启用供应商、物料关联 */
            enableRelation:function(row){
                this.$confirm('是否确认启用该物料关联?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(()=>{
                    let data = {};
                    data.supplier = this.selection[0].id;
                    data.materiel = row.id;
                    this.apiPost('admin/supplier/enableRelation',data).then(res=>{
                        if (typeof  res === 'string'){
                            res = JSON.parse(res);
                        }
                        if (res.code != 200){
                            _g.toastMsg('error',res.message);
                        } else{
                            _g.toastMsg('success',res.message);
                            this.getRelationMateriel(data.supplier);
                        }
                    });
                }).catch(()=>{});
            },
            /* 获取物料字段信息 */
            getFieldList: function(){
                let data = {};
                data.url = '/Materiel/supplier';
                this.apiPost('/materiel/field/getList',data).then(res=>{
                    if (res.code == 200){
                        this.fieldList = res.field;
                        this.fieldShow = res.fieldShow;
                        this.searchField = res.searchField;
                    }else{
                        _g.toastMsg("error", res.message);
                    }
                });
            },
            /* 供应商弹框拖动事件 */
            moveSupplierDiolog:function(){
                var supplierDialog = this.$refs.supplierDialog;
                var dialogW = 730;
                var screenW = window.screen.availWidth;
                var screenH = window.screen.availHeight;
                var dialogTitle = supplierDialog['children'][0];
                dialogTitle.onmousedown = function (e) {
                    var disX = (e || event).clientX;
                    var disY = (e || event).clientY;
                    supplierDialog.left = supplierDialog.offsetLeft;
                    supplierDialog.top = supplierDialog.offsetTop;
                    document.onmousemove = function (e) {
                        var iX = supplierDialog.left + ((e || event).clientX - disX);
                        var iY = supplierDialog.top + ((e || event).clientY - disY);
                        var e = e || window.event;
                        var mX = screenW - dialogW;
                        var mY = screenH - 170;
                        iX < 0 && (iX = 0);
                        iX > mX && (iX = mX);
                        iY < 0 && (iY = 0);
                        iY > mY && (iY = mY);
                        supplierDialog.style.left = iX + 'px';
                        supplierDialog.style.top = iY + 'px';
                        return false;
                    };
                    document.onmouseup = function () {
                        document.onmousemove = null;
                        document.onmouseup = null;
                        supplierDialog.releaseCapture && supplierDialog.releaseCapture();
                    };
                    supplierDialog.setCapture && supplierDialog.setCapture();
                    return false;
                }
            },
            /* 计算分割线的高度,物料表单弹框定位 */
            supplierDialogPosition:function () {
                var supplierDialog = this.$refs.supplierDialog;
                var dialogW = 1200;
                var screenW = window.screen.availWidth;
                var heightOne = window.screen.availHeight - (window.outerHeight - window.innerHeight + 220) - 2;
                // var dialogW = materielDialogDiv.offsetWidth;
                supplierDialog.style.height = heightOne + 'px';
                supplierDialog.style.left = Math.floor((screenW - dialogW)/2) + 'px';
            },
            getParentSupplier:function (id = null) {
                let data = {};
                data.id = id;
                this.apiPost('admin/supplier/getParent',data).then(res=>{
                     this.newCompanyData = res.data;
                });
            }
        },
        /* 监听表格select事件 */
        watch: {
            selection(data) {
                this.selectRow = [];
                if (data.length > 0) {
                    data.forEach((item, index) => {
                        this.selectRow.push(this.supplierData.indexOf(item));
                    });
                }
            }
        },
        mounted: function () {
            this.supplierDialogPosition();
            this.moveSupplierDiolog();
            this.getSupplier();
            this.getProvList();
            this.getCountryList();
            this.getFieldList();
        },
        mixins: [http]
    }
</script>

<style scoped>
    .operatBtnBig{
        display: inline-block;
        color: white;
        background-color: #f39c00;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 5px;
        padding: 0 8px;
        border-radius: 0;
    }
    .operatBtnMiddle{
        display: inline-block;
        color: white;
        background-color: #f39c00;
        width: 44px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border: none;
        font-size: 14px;
        cursor: pointer;
        margin-left: 0;
        margin-right: 5px;
        padding: 0 8px;
        border-radius: 0;
    }
    .operatBtnMiddle:hover,.operatBtnBig:hover{
        background-color: #f5b466;
    }
    .materielClass{
        position: fixed;
        width: 1200px;

        top: 50px;
        margin:0 auto;
        overflow: auto;
        background-color: white;
        box-shadow: 1px 1px 5px rgba(0,0,0,.2);
        border-radius: 10px;
        z-index: 2000;
        padding: 10px 15px 20px 15px;
    }
    .materielTitle{
        height: 24px;
        line-height: 24px;
        padding: 20px 30px 10px 30px;
        font-size: 18px;
        color: #303133;
        cursor: move;
    }
    .materielContent{
        padding: 30px 30px;
    }
    .clear{
        clear: both;
    }
    .materielFooter{
        padding: 10px 30px 30px 30px;
        text-align: right;
    }
    .materielButton{
        display: inline-block;
        height: 18px;
        line-height: 18px;
        width: 18px;
        padding: 2px 5px;
        cursor: pointer;
    }
    .el-radio{
        margin-left: 30px;
        margin-right: 0;
    }
    .buttonText{
        color: #606266;
    }
    .supplierRow{
        background: #f8edf4;
    }
    .el-table__body tr.current-row>td{
        background-color: #f1a546;
    }
</style>
<style>
    .addSupperlierClass td{
        padding: 0;
    }
    .addSupperlierClass td .el-input__inner{
        border-radius: 0;
    }
    .addSupperlierClass .cell,.addSupperlierClass th div,.addSupperlierClass td:first-child .cell,.addSupperlierClass th:first-child .cell{
        padding: 0 2px;
    }
    .el-table__expanded-cell[class*="cell"]{
        padding: 2px 2px 10px 46px;
    }
</style>